<template>
  <div class="page">
    <!-- 顶部栏 -->
    <Base-Navbar title="订单支付" left-arrow></Base-Navbar>

    <div class="container">
      <!-- 待支付列表 -->
      <ul class="list mb-30">
        <li class="item" v-for="(v, i) in detail.order_goods" :key="i">
          <pay-item :v="v"></pay-item>
        </li>
      </ul>

      <!-- 选择收货地址 -->
      <div class="mb-30">
        <div class="title">选择收货地址</div>

        <div
          class="flex flex-cc flex-rb click"
          @click="router.push('/address/index?mode=select')"
        >
          <div class="mr-10" v-if="address.id">
            <div class="flex">
              <div class="mr-10">
                <span>姓名：</span>
                <span>{{ address.receiver }}</span>
              </div>

              <div>
                <span>电话：</span>
                <span>{{ address.mobile }}</span>
              </div>
            </div>

            <div>
              <span>地址：</span>
              <span>{{ address.address }}</span>
            </div>
          </div>

          <div v-else>请选择收货地址</div>

          <div>
            <van-icon class="cl-black" name="arrow" size="20px"></van-icon>
          </div>
        </div>
      </div>

      <!-- 选择支付方式 -->
      <div class="mb-10">
        <div class="title">选择支付方式</div>
      </div>

      <div>
        <van-button type="primary" block>
          <span>支付</span>
          <span class> 200 </span>
          <span>USDT</span>
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from 'js/api'

import payItem from '../components/pay_item.vue'

const router = useRouter()
const route = useRoute()

const detail = ref({})
const address = ref(JSON.parse(localStorage.getItem('selectedAddress') || '{}'))

getOrderDetail()

if (address.value.id) {
  localStorage.removeItem('selectedAddress')
} else {
  getDefaultAddress()
}

// 获取订单详情
async function getOrderDetail() {
  const params = {
    order_sn: route.query.id,
  }

  const { code, data } = await api.getOrderDetail(params)

  if (code === 1) {
    detail.value = data
  }
}

// 获取默认收货地址
async function getDefaultAddress() {
  const { code, data } = await api.getDefaultAddress()

  if (code === 1) {
    address.value = data
  }
}
</script>

<style lang="scss" scoped></style>
